<template>
  <div class="pd-20 banner-ad">
    <el-input v-model="queryData.title"
              placeholder="广告标题"
              clearable
              @clear="op('select')"
              class="w-200"/>
    <el-select v-model="queryData.type"
               class="w-200"
               clearable
               @change="op('select')"
               placeholder="广告类型">
      <el-option v-for="item in typeList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>

    <el-select v-model="queryData.port"
               class="w-200"
               clearable
               @change="op('select')"
               placeholder="投放端口">
      <el-option v-for="item in portList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="queryData.positionType"
               class="w-200"
               clearable
               filterable
               @change="op('select')"
               placeholder="位置类型">
      <el-option v-for="item in positionTypeList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>


    <el-button type="primary"
               @click="op('select', null)">查 询
    </el-button>
    <el-button type="primary"
               @click="op('add', null)">新 增
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="searchParams.pageIndex"
                   :pageSize="searchParams.pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:op="{row}">
        <el-button type="primary"
                   @click="op('detail', row)">详 情
        </el-button>
        <el-button type="primary"
                   @click="op('edit', row)">编 辑
        </el-button>
        <el-button type="danger"
                   @click="op('del', row)">删 除
        </el-button>
      </template>
    </element-table>
    <banner-dialog :bannerObj="bannerObj"
                   :visible.sync="isBannerDialog"
                   :isDetail="isDetail"
                   v-if="isBannerDialog"></banner-dialog>
  </div>
</template>
<script>
import elementTable from '@/base/ElementTable'
import bannerDialog from './bannerDialog'

export default {
  name: 'bannerAd', // banner广告
  data() {
    return {
      queryData: {
        title: '',
        type: '',
        port: '',
        positionType: ''
      },
      loading: false,
      isBannerDialog: false,
      isDetail: false,
      searchParams: {
        pageIndex: 1,
        pageSize: 15
      },
      pageTotal: 0,
      tableData: [],
      columns: [
        {
          label: '广告标题',
          prop: 'title',
          width: 200
        }, {
          label: '广告类型',
          prop: 'type',
          align: 'center',
          width: 100,
          formatter: (row, cellValue) => {
            if (row.type === 1) return <el-tag type="success">普通广告</el-tag>
            if (row.type === 2) return <el-tag type="warning">精准推销</el-tag>
          }
        }, {
          label: '投放端口',
          prop: 'port',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.port === 1) return <el-tag type="danger">用户端</el-tag>
            if (row.port === 2) return <el-tag type="info">医生端</el-tag>
            if (row.port === 3) return <el-tag type="success">沃慧管</el-tag>
            if (row.port === 4) return <el-tag type="warning">5G智慧数字医疗系统</el-tag>
            if (row.port === 5) return <el-tag type="success">医院二位码扫描下载页</el-tag>
            if (row.port === 6) return <el-tag>官网</el-tag>
          }
        }, {
          label: '位置类型',
          prop: 'positionType',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.positionType === 1) return '首页开机轮播'
            if (row.positionType === 2) return '闪屏'
            if (row.positionType === 3) return '首页弹屏'
            if (row.positionType === 4) return '首页轮播'
            if (row.positionType === 5) return '商城轮播'
            if (row.positionType === 6) return '新科技弹屏'
            if (row.positionType === 7) return '官网首页'
            if (row.positionType === 8) return '5G屏保'
            if (row.positionType === 9) return '沃慧管头部广告'
            if (row.positionType === 10) return '沃慧管首页广告'
            if (row.positionType === 11) return '沃慧管画像详情'
            if (row.positionType === 12) return '沃慧管产品学习'
            if (row.positionType === 13) return '医院下载页面'
            if (row.positionType === 14) return '爱追客'
            if (row.positionType === 15) return '风险筛查分类列表广告位'
            if (row.positionType === 16) return '居家监测列表广告位'
            if (row.positionType === 17) return '健康自测列表广告位'
            if (row.positionType === 18) return '远程监测列表广告位'
            if (row.positionType === 19) return '百分包广告位'
            if (row.positionType === 20) return '个人主动健康广告位'
            if (row.positionType === 21) return '家庭主动健康广告位'
            if (row.positionType === 22) return '门诊快诊广告位'
            if (row.positionType === 23) return '合作邀请底部广告位'
            if (row.positionType === 24) return '远程心电广告位'
            if (row.positionType === 25) return '家庭医生包广告位'
            if (row.positionType === 26) return '私人医生包广告位'
            if (row.positionType === 27) return '心脑血管'
            if (row.positionType === 28) return '糖尿病'
            if (row.positionType === 29) return '四高病症'
            if (row.positionType === 30) return '肿瘤'
            if (row.positionType === 31) return '远程监测广告位'
            if (row.positionType === 32) return '患者管理推荐服务首页广告'
            if (row.positionType === 33) return '开启生命圆盘广告位'
            if (row.positionType === 34) return '生命圆盘评测结果首页广告位'
            if (row.positionType === 35) return '生命圆盘基础信息编辑广告位'
            if (row.positionType === 36) return '生命圆盘常测项广告位'
            if (row.positionType === 37) return '生命圆盘指征详情广告位'
            if (row.positionType === 38) return '生命圆盘指征编辑广告位'
            if (row.positionType === 39) return '健康地图首页广告位'
            if (row.positionType === 40) return '绘制地图广告位'
            if (row.positionType === 41) return '健康地图病种详情广告'
            if (row.positionType === 42) return '健康地图项目详情广告'
            if (row.positionType === 43) return '健康地图项目编辑广告位'
            if (row.positionType === 44) return '健康地图-签约套餐使用广告位'
            if (row.positionType === 45) return '慢病签约-用药指导详情广告位'
            if (row.positionType === 46) return '慢病签约-知识/措施详情广告位'
            if (row.positionType === 47) return '慢病签约-套餐包亮点/特色详情广告位'
          }
        }, {
          label: '有效期',
          prop: 'termOfValidity',
          align: 'center',
          formatter: (row, cellValue) => {
            return row.termOfValidity === -1 ? '永久' : `${row.termOfValidity}天`
          }
        }, {
          label: '创建时间',
          prop: 'createTime',
          width: 200,
          align: 'center',
          formatter: (row, cellValue) => {
            return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
          }
        }, {
          label: '是否显示',
          prop: 'isShow',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.isShow === 1) return '显示'
            if (row.isShow === 0) return '不显示'
          }
        }, {
          label: '是否到期',
          prop: 'isExpire',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.isExpire === 0) return '未到期'
            if (row.isExpire === 1) return '已到期'
          }
        }, {
          width: 280,
          label: '操作',
          align: 'center',
          prop: 'op',
          isSlot: true
        }
      ],
      typeList: [
        {name: '普通广告', id: 1},
        {name: '精准营销', id: 2},
      ],
      portList: [
        {name: '用户端', id: 1},
        {name: '医生端', id: 2},
        {name: '沃慧管', id: 3},
        {name: '5G智慧数字医疗系统', id: 4},
        {name: '医院二位码扫描下载页', id: 5},
        {name: '官网', id: 6},
      ],
      positionTypeList: [
        {name: '首页开机轮播', id: 1},
        {name: '闪屏', id: 2},
        {name: '首页弹屏', id: 3},
        {name: '首页轮播', id: 4},
        {name: '商城轮播', id: 5},
        {name: '新科技弹屏', id: 6},
        {name: '官网首页', id: 7},
        {name: '5G屏保', id: 8},
        {name: '沃慧管头部广告', id: 9},
        {name: '沃慧管首页广告', id: 10},
        {name: '沃慧管画像详情', id: 11},
        {name: '沃慧管产品学习', id: 12},
        {name: '医院下载页面', id: 13},
        {name: '爱追客', id: 14},
        {name: '风险筛查分类列表广告位', id: 15},
        {name: '居家监测列表广告位', id: 16},
        {name: '健康自测列表广告位', id: 17},
        {name: '远程监测列表广告位', id: 18},
        {name: '百分包广告位', id: 19},
        {name: '个人主动健康广告位', id: 20},
        {name: '家庭主动健康广告位', id: 21},
        {name: '门诊快诊广告位', id: 22},
        {name: '合作邀请底部广告位', id: 23},
        {name: '远程心电广告位', id: 24},
        {name: '家庭医生包广告位', id: 25},
        {name: '私人医生包广告位', id: 26},
        {name: '心脑血管', id: 27},
        {name: '糖尿病', id: 28},
        {name: '四高病症', id: 29},
        {name: '肿瘤', id: 30},
        {name: '远程监测广告位', id: 31},
        {name: '患者管理推荐服务首页广告', id: 32},
        {name: '开启生命圆盘广告位', id: 33},
        {name: '生命圆盘评测结果首页广告位', id: 34},
        {name: '生命圆盘基础信息编辑广告位', id: 35},
        {name: '生命圆盘常测项广告位', id: 36},
        {name: '生命圆盘指征详情广告位', id: 37},
        {name: '生命圆盘指征编辑广告位', id: 38},
        {name: '健康地图首页广告位', id: 39},
        {name: '绘制地图广告位', id: 40},
        {name: '健康地图病种详情广告', id: 41},
        {name: '健康地图项目详情广告', id: 42},
        {name: '健康地图项目编辑广告位', id: 43},
        {name: '健康地图-签约套餐使用广告位', id: 44},
        {name: '慢病签约-用药指导详情广告位', id: 45},
        {name: '慢病签约-知识/措施详情广告位', id: 46},
        {name: '慢病签约-套餐包亮点/特色详情广告位', id: 47},
      ]
    }
  },
  methods: {
    async getList() {
      this.loading = true
      let {pageIndex} = {...this.searchParams}
      const {data: res} = await this.post(this.api.banner.getBannerList, {
        ...this.searchParams,
        pageIndex: pageIndex - 1,
        ...this.queryData
      })
      if (res.code === '200') {
        this.loading = false
        this.tableData = res.object
        this.pageTotal = res.totalNum
      }
    },
    // 分页
    handleChangePage(page) {
      this.searchParams.pageIndex = page
      this.getList()
    },
    //
    op(op, row) {
      switch (op) {
        case 'select':
          this.searchParams.pageIndex = 1
          this.getList()
          break;
        case 'add':
          this.bannerObj = null
          this.isDetail = false
          this.isBannerDialog = true
          break;
        case 'detail':
          this.bannerObj = row
          this.isDetail = true
          this.isBannerDialog = true
          break;
        case 'edit':
          this.bannerObj = row
          this.isDetail = false
          this.isBannerDialog = true
          break;
        case 'del':
          this.$confirm('确认删除?')
            .then(async _ => {
              const {data: res} = await this.post(this.api.banner.delAdvertisementById, {id: row.id})
              if (res.code === '200') {
                this.$message.success('删除成功!')
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            })
            .catch(_ => {
            })
          break;
      }
    }
  },
  created() {
    this.getList()
  },
  components: {
    'element-table': elementTable,
    'banner-dialog': bannerDialog,
  }
}
</script>
<style scoped lang="scss">
</style>
